<template>
  <div class="list-item" @click="$emit('goDetail', mail.id)">
    <span class="subject">{{ mail.subject }}</span>
    <span class="sender">{{ mail.sender }}</span>
    <span class="date">{{ mail.received_at }}</span>
    <span class="status">
      <span :class="mail.is_read ? 'read' : 'unread'">{{ mail.is_read ? '已读' : '未读' }}</span>
    </span>
  </div>
</template>
<script setup lang="ts">
defineProps<{
  mail: any
}>()
</script>
<style scoped>
.list-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid #eee;
  transition: background 0.2s;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  cursor: pointer;
}
.subject {
  display: inline-block;
  width: 320px;
  padding-right: 12px;
}
.sender {
  display: inline-block;
  width: 300px;
  padding-right: 12px;
}
.date {
  display: inline-block;
  width: 300px;
  padding-right: 12px;
}
.status {
  display: inline-block;
  width: 300px;
}
.read {
  color: #67c23a;
}
.unread {
  color: #f56c6c;
}
.list-item:hover {
  background: #f9e9e7;
}
</style>
